<template>
    <div class="uploadImage">
        <div class="upload">
            <el-upload class="upload-demo" :headers="headers" ref="upload" action="http://localhost:3000/uploadImage"
                :on-change="handleChange" accept="image/*" :file-list="fileList" :auto-upload="false" multiple>
                <el-button slot="trigger" size="big" type="primary">选择图片</el-button>
                <el-button style="margin-left: 10px;" size="big" type="primary" @click="submitUpload">提交</el-button>
            </el-upload>
        </div>
    </div>
</template>
   
<script>
export default {
    data() {
        return {
            fileList: [],
            headers: {
                Authorization: localStorage["token"]
            }
        };
    },
    methods: {
        submitUpload() {
            this.$refs.upload.submit();
        },
        handleChange(file, fileList) {
            // console.log(file);
            // console.log(fileList);
        }
    }
}

</script>
<style>
.uploadImage {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
}

.upload {
    width: 100%;
    height: 100%;
    border: 3px dashed #ccc;
}

.upload-demo {
    text-align: center;
    margin: 100px auto;
}
</style>
  